<!--
  This file is a part of the open-eBackup project.
  This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0.
  If a copy of the MPL was not distributed with this file, You can obtain one at
  http://mozilla.org/MPL/2.0/.
  
  Copyright (c) [2024] Huawei Technologies Co.,Ltd.
  
  THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
  EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
  MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
  -->

<lv-form [formGroup]="formGroup" class="formGroup">
    <lv-form-item>
        <lv-form-label lvRequired>
            {{ 'common_name_label' | i18n }}
        </lv-form-label>
        <lv-form-control [lvErrorTip]="baseUtilService.nameErrorTip">
            <input lv-input type="text" formControlName="name" />
        </lv-form-control>
    </lv-form-item>
    <lv-form-item>
        <lv-form-label lvRequired>
            {{ 'protection_cluster_label' | i18n }}
        </lv-form-label>
        <lv-form-control [lvErrorTip]="baseUtilService.requiredErrorTip">
            <lv-select formControlName="cluster" [lvOptions]="clusterOptions" lvValueKey="value" lvFilterKey="label"
                lvFilterMode="contains" [lvDisabled]="data" lvShowFilter>
            </lv-select>
        </lv-form-control>
    </lv-form-item>
    <lv-form-item>
        <lv-form-label lvRequired>
            {{ 'common_database_label' | i18n }}
        </lv-form-label>
        <lv-form-control [lvErrorTip]="baseUtilService.requiredErrorTip">
            <lv-select formControlName="database" [lvOptions]="databaseOptions" lvValueKey="value" lvShowFilter
                lvFilterKey="label" lvFilterMode="contains" [lvDisabled]="data">
            </lv-select>
            <ng-container *ngIf="formGroup.value.database">
                <div class="database-table">
                    <lv-datatable [lvData]="databaseData" #lvTable>
                        <thead>
                            <tr>
                                <th>{{ 'common_database_label' | i18n }}</th>
                                <th>
                                    {{ 'protection_auto_protect_table_label' | i18n }}
                                    <i lv-icon="aui-icon-help" [lv-tooltip]="contentTemplate" class="auto-protect-help"
                                        lvColorState='true'></i>
                                    <ng-template #contentTemplate>
                                        <span [innerHTML]="protectDatabaseHelp"></span>
                                    </ng-template>
                                </th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr *ngFor="let item of lvTable.renderData">
                                <td>{{item.label}}</td>
                                <td>
                                    <lv-group lvGutter='14px'>
                                        <lv-switch formControlName="autoProtect" [lvDisabled]="isAutoProtectDisabled">
                                        </lv-switch>
                                        <span *ngIf="!formGroup.value.autoProtect" class="aui-link"
                                            (click)="selectTable(item)">{{'common_select_label' | i18n}}</span>
                                    </lv-group>
                                </td>
                            </tr>
                        </tbody>
                    </lv-datatable>
                </div>
            </ng-container>
        </lv-form-control>
    </lv-form-item>
    <lv-form-item>
        <lv-form-label lvRequired>
            {{ 'protection_metadata_path_label' | i18n }}
            <i lv-icon="aui-icon-help" lv-tooltip="{{ 'protection_metadata_path_tips_label' | i18n }}"
                lvTooltipTheme="light" class="configform-constraint" lvColorState="true"></i>
        </lv-form-label>
        <lv-form-control>
            <lv-tree-select formControlName="metadataPath" [lvTreeData]="metadataPathData" lvTreeSelectionMode="single"
                lvTreeAsync="true" (lvExpandedChange)="expandedChange($event)" [lvTreeNodeTemplate]="nodeTpl"
                lvVirtualScroll lvTreeShowLine></lv-tree-select>
            <ng-template #nodeTpl let-item>
                <div style="width: 380px;" lv-overflow>
                    <span *ngIf="!item.isMoreBtn">
                        {{item.label}}
                    </span>
                </div>
                <span class="aui-link" *ngIf="item.isMoreBtn"
                    (click)="getClusterResource(item.parent,item.startPage)">{{item.label}}</span>
            </ng-template>
        </lv-form-control>
    </lv-form-item>
</lv-form>